import React, {Component} from 'react';
import MyHeader from "../MyUIComponent/MyHeader";
import {Col, List, Row} from "antd";
import NewImgComponentForm from "../MyUIComponent/NewImgComponentForm";
import {axiosGetFunction} from "../MyConfig/AppConfig";

class MyImgComponent extends Component {

    state = {
        img_component_list: []
    }

    componentDidMount() {
        console.log("MyImgComponent: componentDidMount")
        let userIdStr = localStorage.getItem("userInfo:id")
        if (userIdStr){
            axiosGetFunction(
                "/img_component/mine?user_id="+userIdStr,
                (received_data)=>{
                    console.log("received_data", received_data)
                    this.setState({
                        img_component_list: received_data
                    })
                }
            )
        }
    }

    render() {
        let { img_component_list } = this.state;
        return (
            <div>
                <MyHeader pathname="my_img_component"/>
                <br/>
                <Row>
                    <Col span={16} style={{ padding: 20, minHeight: 800, borderRight: "1px solid gray" }}>
                        <h2>我的组态组件</h2>
                        <List
                            itemLayout="vertical"
                            pagination={{
                                onChange: page => {
                                    console.log(page);
                                },
                            }}
                            dataSource={img_component_list}
                            renderItem={(item)=>(
                                <List.Item
                                    key={item.title}
                                    extra={
                                        <img
                                            width={140}
                                            alt="logo"
                                            src={item.img_url}
                                        />
                                    }
                                >
                                    【ID】{item.img_component_id}【组名】{item.group_name}【标题】{item.title}【文本】{item.text_str}
                                </List.Item>)
                            }
                        />
                    </Col>
                    <Col span={8} style={{ padding: 20, minHeight: 800 }}>
                        <h2>新建组态组件</h2>
                        <NewImgComponentForm/>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default MyImgComponent;
